/**
 * 开单搜索
 * @author: minzhang
 * @update: 2017-03-21
 */

import React, { PropTypes } from 'react';
import { Button, Form, Input, Select, Icon } from 'antd';
import styles from './BillingSearch.less';

const FormItem = Form.Item;
const Option = Select.Option;

const BillingSearch = ({
	onSubmit,
	form: {
		getFieldDecorator,
		getFieldsValue,
		resetFields,
		setFieldsValue,
	},
}) => {
	
  // labelcol wrappercol间距大小
	const formItemLayout = {
		labelCol: {
			span: 9,
		},
		wrapperCol: {
			span: 12,
		},
	};
	
	// 搜索
	function handleSubmit() {
		onSubmit(getFieldsValue());
	}
	
	// 清除条件
	function handleReset(e){
		e.preventDefault();
		resetFields();
	};
	
	return (
		<div>
			<Form layout="horizontal" className="ant-advanced-search-form" className={styles.wrap}>
				<FormItem
					label="包间状态"
					{...formItemLayout}
				>
					{getFieldDecorator('_query_tech_name')(
						<Select placeholder="请选择包间状态">
								<Option value="0">女</Option>
								<Option value="1">男</Option>
						</Select>
					)}
				</FormItem>
				<FormItem
					label="容纳人数"
					{...formItemLayout}
				>
					{getFieldDecorator('_query_tech_no')(
						<Select placeholder="请选择容纳人数">
								<Option value="0">女</Option>
								<Option value="1">男</Option>
						</Select>
					)}
				</FormItem>
				<FormItem
					label="包间名："
					{...formItemLayout}
				>
					{getFieldDecorator('_query_name')(
						<Input placeholder="请输入包间名" size="default" />
					)}
				</FormItem>
				<FormItem
					label="技师号："
					{...formItemLayout}
				>
					{getFieldDecorator('_query_name')(
						<Input placeholder="请输入技师号" size="default" />
					)}
				</FormItem>
				<div className="tc">
					<Button onClick={handleSubmit} type="primary"><Icon type="search" />搜索</Button>
				</div>
			</Form>
		</div>
	);
};

export default Form.create({
	onFieldsChange(props, changedFields) {
			props.onChange(changedFields);
	},
})(BillingSearch);